import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView, FlatList } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

interface WithdrawalRecord {
    amount: number;
    date: string;
}

const TixinScreen = () => {
    const [amount, setAmount] = useState('');
    const availableAmount = 4188.58;

    const withdrawalHistory: WithdrawalRecord[] = [
        { amount: 569.5, date: '2018/02/15' },
        { amount: 269.5, date: '2018/05/21' },
        { amount: 128.0, date: '2018/06/17' },
        { amount: 827.5, date: '2018/07/25' },
        { amount: 569.5, date: '2018/08/15' },
        { amount: 269.5, date: '2018/09/21' },
        { amount: 128.0, date: '2018/10/17' },
        { amount: 827.5, date: '2018/10/25' },
        { amount: 128.0, date: '2018/11/17' },
        { amount: 827.5, date: '2018/12/25' },
    ];

    const handleWithdraw = () => {
        if (!amount) {
            return;
        }
        console.log('提现金额:', amount);
        // 这里添加提现逻辑
    };

    const renderHistoryItem = ({ item }: { item: WithdrawalRecord }) => (
        <View style={styles.historyItem}>
            <Text style={styles.historyAmount}>提现 ¥{item.amount}</Text>
            <Text style={styles.historyDate}>{item.date}</Text>
        </View>
    );

    return (
        <View style={styles.container}>
            <View style={styles.topCard}>
                <Text style={styles.availableText}>可提现金额</Text>
                <Text style={styles.amountText}>¥{availableAmount}</Text>
                <View style={styles.inputContainer}>
                    <TextInput
                        style={styles.input}
                        placeholder="输入提现金额"
                        value={amount}
                        onChangeText={setAmount}
                        keyboardType="decimal-pad"
                        placeholderTextColor="#999"
                    />
                </View>
                <TouchableOpacity
                    style={styles.withdrawButton}
                    onPress={handleWithdraw}
                >
                    <Text style={styles.withdrawButtonText}>确认提现</Text>
                </TouchableOpacity>
            </View>

            <View style={styles.historyContainer}>
                <Text style={styles.historyTitle}>提现记录</Text>
                <FlatList
                    data={withdrawalHistory}
                    renderItem={renderHistoryItem}
                    keyExtractor={(item, index) => index.toString()}
                    showsVerticalScrollIndicator={false}
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    topCard: {
        backgroundColor: '#fff',
        padding: 20,
        alignItems: 'center',
        marginBottom: 10,
    },
    availableText: {
        fontSize: 16,
        color: '#333',
        marginBottom: 10,
    },
    amountText: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 20,
    },
    inputContainer: {
        width: '100%',
        backgroundColor: '#f5f5f5',
        borderRadius: 5,
        marginBottom: 20,
    },
    input: {
        width: '100%',
        height: 45,
        paddingHorizontal: 15,
        fontSize: 16,
        color: '#333',
    },
    withdrawButton: {
        width: '100%',
        height: 45,
        backgroundColor: '#ff9500',
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
    },
    withdrawButtonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
    },
    historyContainer: {
        flex: 1,
        backgroundColor: '#fff',
        padding: 15,
    },
    historyTitle: {
        fontSize: 16,
        color: '#333',
        marginBottom: 15,
        fontWeight: 'bold',
    },
    historyItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    historyAmount: {
        fontSize: 14,
        color: '#333',
    },
    historyDate: {
        fontSize: 14,
        color: '#999',
    },
});

export default TixinScreen; 